<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/normalize.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-bar-nav{
				background: #FE635F;
			}
			a{
			color:rgba(255,255,255,1);
			}
			.mui-title{
				color: rgba(255,255,255,1);
			}
			.mui-input-group{
				
				margin-top: 44px!important;
				boder:none!important;
			}
			
			.mui-input-group:before{
				height: 0px;
			}
			
			.mui-input-group:after{
				height: 0px;
			}
			.mui-input-group .mui-input-row:last-child:after{
				height: 0px;
			}
			.hang:after{
				height: 0px;
			}
			
			.mui-input-group .mui-input-row{
				height: 54px;
			}
			
			.mui-input-row label{
				    padding: 18px 15px;
			}
			.mui-input-group input, .mui-input-group textarea{
				
				 padding: 25px 15px;
			}
			
			input, select, textarea,label{
				font-size: 15px!important;
			}
			.mui-input-row input{
				width: 75%!important;
			}
			label{
				box-sizing: border-box;
				margin-left: 2%;
			}
			.mui-input-group .mui-input-row:after{
				left: 11px;
				right: 11px;
				box-sizing: border-box;
			}
			.xinxin{
				position: absolute;
				left: 10px;
				top: 22px;
				width: 7.5px;
				height: 7px;
			}
			.hang{
				width: 100%;
				height: 10px;
				background:rgba(248,248,248,1);
			}
			
			.has:after{
				height: 0px!important;
				
			}
			.touxing{
				height: 135px!important;
				box-sizing: border-box;
			}
			
			.touxing  div{
				width: 30px;
				font-size: 15px;
				padding-top: 16px;
				margin-left: 23px;
				box-sizing: border-box;
				height: 100%;
			}
			
			.touxing  img:nth-child(4){
				position: absolute;
				left: 80px;
				width: 105px;
				height: 105px;
				top: 10px;
				z-index: 10;
			}
			.mui-btn-blue, .mui-btn-primary, input[type=submit]{
				border: none;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
border-radius:43px;
margin-top: 50px;
			}
		
/* #touxiang{
	position: absolute;
	left: 100px;
	top: 0px;
				width: 100px!important;
				height: 100px!important;
				border: 1px solid red!important;
			} */
			
			.nannv{
				position: relative;
				width: 100%;
				height:52px ;
			}
			
			.gendername{
				position: relative;
				float: left;
				 width: 35%;
				 height: 100%;
				 line-height: 50px;
				 padding-left: 15px;
				 box-sizing: border-box;
			}
			
			.gender{
				position: relative;
				float: left;
				width: 75%;
				line-height: 50px;
			}
			
			.gender  >div{
				position: relative;
				float: left;
				width: 50%;
				height: 100%;
			}
			.mui-inputs{
				
				line-height: 50px;
				padding: 0px!important;
			}
			.huoqu{
				position: absolute;
				height:40px;
                background:linear-gradient(76deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
                border-radius:10px;
				font-size:15px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
				line-height:45px;
				line-height: 40px;
				width:100px;
				text-align: center;
				right: 30px;
				top: 7px;
			}
			
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group" id="form">
				<div class="mui-input-row">
					<img class="xinxin" src="image/xingxing.png" />
					<label>账号</label>
					<input id='account' name="user" type="text" class="mui-input-clear mui-input" placeholder="请输入手机号码">
				</div>
				<div class="mui-input-row">
					<img class="xinxin" src="image/xingxing.png" />
					<label>验证码</label>
					<input id="code"  name="yanzhen" type="text" class="mui-input-clear mui-input" placeholder="请输入验证码">
				    <div class="huoqu">获取验证码</div>
				</div>
				
				<div class="mui-input-row">
					<img class="xinxin" src="image/xingxing.png" />
					<label>密码</label>
					<input id='password' type="password" name="pwd" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<img class="xinxin" src="image/xingxing.png" />
					<label>确认</label>
					<input id='password_confirm' type="password" name="confirm" class="mui-input-clear mui-input" placeholder="请确认密码">
				</div>




				<div class="mui-input-row">
					<img class="xinxin" src="image/xingxing.png" />
					<label>昵称</label>
					<input id='nickname' name="name" class="mui-inputs" placeholder="请输入昵称">
				</div>
				<div class="mui-input-row">
					<label>邀请码</label>
					<input id='yaoqing' name="invitation" class="mui-inputs" placeholder="请输入邀请码">
				</div>

				<div class="nannv">
					<img class="xinxin" src="image/xingxing.png" />
					<label class="gendername">性别</label>
					<div class="gender">
						<div class="isd">
							<label>男</label>
							<input name="sex" type="radio" class="isd" value="男" checked="true">
						</div>
						<div class="isd">
							<label>女</label>
							<input name="sex" value="女" type="radio">
						</div>
					</div>
				</div>

				<div class="hang"></div>
				<div class="mui-input-row  touxing">
					<img class="xinxin" src="image/xingxing.png" />
					<div>头像</div>
					<input id="touxiang" type="text" name="touxiang">
					<img id="tou" for="touxiang" src="image/shangchuanjia.png" />
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
			</div>

		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/jquery.photoClip.js"></script>
		<script src="js/iscroll-zoom.js"></script>
		<script src="js/hammer.js"></script>
		<script src="js/MaoWenKe.js"></script>
		<script src="maowenke/ChaJian.js"></script>
		</script>
		<script type="text/javascript">
			var  xin="男";
			 //点击性别选择
			mui(".isd").on("tap", "input", function() {
				xin = $(this).siblings("label").text();
			})

			window.addEventListener('refresh', function(e) { //执行刷新
				var imgd = localStorage.getItem("headimage")
				shangchuantouxiang(imgd, function(data) {
					var datapath = data.path;
					var mainImg = document.getElementById('tou').src = datapath;
					$("#touxiang").val(data.id);
					plus.nativeUI.closeWaiting()
				});


			});
			mui.plusReady(function() {

				var url = plus.storage.getItem('url');
				// mui.alert(url);
				mui.init();
				mui('.mui-content-padded').on('tap', '#reg', function() {
				document.activeElement.blur();
					// mui.alert('haha')
					var user = $("#account").val();
					var pwd = $("#password").val();
					var confirm = $("#password_confirm").val();
					var invitation = $("#yaoqing").val();
					var name = $("#nickname").val();
					var code = $("#code").val();
					var touxiang = $("#touxiang").val();
					var sexs = $("[name=sex]");
					var sex = '';
					mui.each(sexs,function(i,v){
						if(v.checked==true){
							sex = $(v).val();
						}
					})
					// mui.alert(sex);
					// return
					plus.nativeUI.showWaiting();
					$.post(url + '/juyou/index/register', {
						user: user,
						pwd: pwd,
						confirm: confirm,
						invitation: invitation,
						name: name,
						touxiang: touxiang,
						sex:sex,
						code:code
					}, function(res) {
						// mui.alert(res.msg);
						plus.nativeUI.closeWaiting();
						mui.toast(res.msg);
						if (res.code == 200) {
							plus.storage.setItem('user', JSON.stringify(res.data));
							setTimeout(function() {
								mui.openWindow({
									url:'index.html',
									id:'index.html'
								})
								
								setTimeout(function()
								{
								var pagedd = plus.webview.currentWebview().opener()
								pagedd.close();
								plus.webview.currentWebview().close();
							
								},1000);
							}, 1500)
							

						}
					})
					// mui.alert(user);
				})
				
				mui(document).on('tap','.huoqu',function(){
					var that = this;
					var phone = $("#account").val();
					if(!phone){
						mui.toast('请填写手机号码');
						return;
					}
					if($(this).text()=='获取验证码'){
						$.post(url+'/juyou/index/getcode',{phone:phone},function(res){
							if(res.code==200){
								mui.toast('发送成功');
								ChaJian.DiaoJiShi(60,function(number){
									if(number==0){
										$(that).text('获取验证码');
									}else{
										var str = number+'秒后重试';
										$(that).text(str);
									}
								});
							}else{
								mui.toast(res.msg);
							}
						})
					
					}
				})
				
			})


			/*点击头像触发*/
			document.getElementById('tou').addEventListener('tap', function() {
				if (mui.os.plus) {
					var a = [{
						title: "拍照"
					}, {
						title: "从手机相册选择"
					}];
					plus.nativeUI.actionSheet({
						title: "头像上传",
						cancel: "取消",
						buttons: a
					}, function(b) { /*actionSheet 按钮点击事件*/
						switch (b.index) {
							case 0:
								break;
							case 1:
								getImages(); /*拍照*/
								break;
							case 2:
								galleryImages(); /*打开相册*/
								break;
							default:
								break;
						}
					})
				}
			}, false);

			//拍照
			function getImages() {
				var mobileCamera = plus.camera.getCamera();
				mobileCamera.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var path = entry.toLocalURL() + '?version=' + new Date().getTime();
						cutImage(path)
						// uploadHeadImg(path);
					}, function(err) {
						console.log("读取拍照文件错误");
					});
				}, function(e) {
					console.log("er", err);
				}, function() {
					filename: '_doc/head.png';
				});
			}

			//从本地相册选择
			function galleryImages() {
				console.log("你选择了从相册选择");
				plus.gallery.pick(function(a) {
					plus.io.resolveLocalFileSystemURL(a, function(entry) {
						plus.io.resolveLocalFileSystemURL('_doc/', function(root) {
							root.getFile('head.png', {}, function(file) {
								//文件已经存在
								file.remove(function() {
									console.log("文件移除成功");
									entry.copyTo(root, 'head.png', function(e) {
										var path = e.fullPath + '?version=' + new Date().getTime();
										cutImage(path)
										// uploadHeadImg(path);
									}, function(err) {
										console.log("copy image fail: ", err);
									});
								}, function(err) {
									console.log("删除图片失败：（" + JSON.stringify(err) + ")");
								});
							}, function(err) {
								//打开文件失败
								entry.copyTo(root, 'head.png', function(e) {
									var path = e.fullPath + '?version=' + new Date().getTime();
									uploadHeadImg(path);
								}, function(err) {
									console.log("上传图片失败：（" + JSON.stringify(err) + ")");
								});
							});
						}, function(e) {
							console.log("读取文件夹失败：（" + JSON.stringify(err) + ")");
						});
					});
				}, function(err) {
					console.log("读取拍照文件失败: ", err);
				}, {
					filter: 'image'
				});
			};


			//裁剪图片
			function cutImage(path) {
				var mainImg = document.getElementById('tou');
				// mainImg.src=path; 
				var images = new Image();
				images.src = path;
				images.onload = function() {
					var imgData = getBase64Image(images);
					console.log(imgData)
					mainImg.src = imgData;
					plus.nativeUI.showWaiting();
					mui.ajax('http://juyous.cybwnt.com/juyou/index/upimgs', {
						data: {
							file: imgData
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							var src = data.path;
							mui.openWindow({
								url: 'cropper.html',
								id: 'cropper.html',
								extras: {
									pathd: src,
								},
								show: {
									aniShow: 'zoom-fade-in',
									duration: 800
								},
								waiting: {
									autoShow: true
								}
							});
							plus.nativeUI.closeWaiting()
						},
						error: function(data) {
							mui.alert(data + "1")
						}
					});
				}

			}


			function shangchuantouxiang(path, func) {
				plus.nativeUI.showWaiting();
				mui.ajax('http://juyous.cybwnt.com/juyou/index/upimgs', {
					data: {
						file: path
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						mui.alert("头像上传成功")
						if (func) {

							func(data)
						}
					},

					error: function(data) {
						mui.alert("头像上传失败")
					}
				});

			}




			//压缩图片转成base64
			function getBase64Image(img) {
				// console.log(img.getBase64Image());
				var canvas = document.createElement("canvas");
				var width = img.width;
				var height = img.height;
				var size = img.size;


				if (width > height) {
					if (width > 500) {
						height = Math.round(height *= 500 / width);
						width = 500;
					}
				} else {
					if (height > 500) {
						width = Math.round(width *= 500 / height);
					}
					height = 500;
				}

				canvas.width = width;
				canvas.height = height;
				var ctx = canvas.getContext('2d');
				ctx.drawImage(img, 0, 0, width, height);

				var dataUrl = canvas.toDataURL('image/png', 0.8);
				return dataUrl.replace('data:image/png:base64,', '');
			}
		</script>
	</body>

</html>
